<script setup>
  import { defineProps, onMounted, ref, computed } from 'vue'
  import { http } from '@/utils/http.js'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { useUsercodeStore } from '@/store/usercode.js'
  import { parseTime } from '@/utils/index.js'

  // 创建 Store 实例
  const userCodeStore = useUsercodeStore()
  //广场列表
  const currentPage = ref(1)
  const keywords = ref('')
  const squareList = ref([])
  const isBuy = ref(0)
  const orderBy = ref('')

  const newTotalNum = computed(() => {
    if (sendGoodsList.value.length > 0) {
      const arr = sendGoodsList.value.filter((e) => e.choosed)
      let num = 0
      arr.map((res) => {
        num = num + +(res.goods_num || 1)
      })
      return num
    } else {
      // sendGoodsList.value[i].choosed = true
      return 0
    }
  })
  async function getSquareList() {
    console.log(1223123213123123 + '12323232')
    const res = await http.request({
      url: '/api/bidding/biddingSquare',
      method: 'POST',
      data: {
        page: currentPage.value,
        limit: 10,
        keywords: keywords.value,
        is_buy: isBuy.value,
        order_by: orderBy.value,
      },
    })
    squareList.value = [...squareList.value, ...res.data]
    squareList.value.forEach((item) => {
      item.goods.forEach((goods) => {
        const currentTimestamp = Math.floor(Date.now() / 1000)
        let daysShort = goods.pass_time - currentTimestamp
        goods.passDay = Math.floor(daysShort / (24 * 60 * 60))
      })
    })
  }

  // 一口价
  function buyNow() {
    currentPage.value = 1
    squareList.value = []
    if (isBuy.value == 0) {
      isBuy.value = 1
    } else {
      isBuy.value = 0
    }
    getSquareList()
  }

  //筛选最新、最热
  function sortBy(sort) {
    if (orderBy.value == sort) {
      return
    }
    currentPage.value == 1
    categaryPage.value = 1
    squareList.value = []
    orderBy.value = sort
    getSquareList()
  }

  // 搜索广场
  function searchSquare() {
    squareList.value = []
    currentPage.value = 1
    isBuy.value = 0
    orderBy.value = ''
    getSquareList()
  }

  // 参与/查看出价
  function joinPage(id) {
    uni.navigateTo({
      url: `/transactionPage/joinin/index?id=${id}`,
    })
  }

  // 查看出价
  function checkPayPrice(id) {
    uni.navigateTo({
      url: `/transactionPage/checkoffer/index?id=${id}`,
    })
  }

  //触底
  function squareListLower() {
    ++currentPage.value
    getSquareList()
  }

  // 发布类型筛选
  const sendpopup = ref()
  const saleCategary = ref(0)
  const ruleId = ref(0)
  const sendGoodsList = ref([])
  const categaryPage = ref(1)
  async function sendGoods() {
    console.log('1231232s')
    totalSum.value = 0
    categaryPage.value = 1
    sendGoodsList.value = []
    saleCategary.value = 0
    ruleId.value = 0
    all.value = false
    await getGoodsList()
    sendpopup.value.open('bottom')
  }

  async function getGoodsList() {
    const res = await http.request({
      url: '/api/bag/bagList',
      method: 'POST',
      data: {
        page: categaryPage.value,
        limit: 30,
        compound: 0,
        type: saleCategary.value,
        launch: launch.value,
        status: 1,
        is_bidding: 1,
        rule_id: ruleId.value,
      },
    })
    res.data.forEach((item) => {
      item.choosed = false
    })
    sendGoodsList.value = [...sendGoodsList.value, ...res.data]
  }

  //商品触底
  function goodsListLower() {
    if (totalSum.value < 300) {
      all.value = false
    }
    ++categaryPage.value
    getGoodsList()
  }

  // 商品状态
  function setSaleCategary(type) {
    saleCategary.value = type
  }

  //赏级
  function setRuleId(type) {
    ruleId.value = type
  }

  // 重置筛选
  function resetCategory() {
    saleCategary.value = 0
    ruleId.value = 0
  }

  //确认筛选背包
  async function sureCategory() {
    totalSum.value = 0
    categaryPage.value = 1
    sendGoodsList.value = []
    await getGoodsList()
    categorypopup.value.close('top')
  }

  // 分类弹出
  const categorypopup = ref()
  async function categoryPOP() {
    await getAllRule()
    categorypopup.value.open('top')
  }

  //获取所有赏级
  const allRules = ref([])
  async function getAllRule() {
    const res = await http.request({
      url: '/api/bag/getRule',
      method: 'POST',
      data: {},
    })
    console.log(res.data)
    allRules.value = res.data
  }

  // 全选
  const all = ref(false)
  const ifchoose = ref(true)
  function chooseAll() {
    totalSum.value = 0
    if (ifchoose.value) {
      ifchoose.value = false
      all.value = true
      if (totalSum.value >= 300) {
        uni.utils.toast('最多只能选300个商品')
      }
      if (sendGoodsList.value.length <= 300) {
        console.log('<300')
        for (let i = 0; i < sendGoodsList.value.length; i++) {
          sendGoodsList.value[i].choosed = true
          totalSum.value++
        }
      } else {
        console.log('>300')
        for (let i = 0; i < 300; i++) {
          sendGoodsList.value[i].choosed = true
          totalSum.value++
        }
      }
      setTimeout(() => {
        ifchoose.value = true
      }, 1500)
    } else {
      uni.utils.toast('让手指放松下吧，请两秒后重试~')
    }
  }

  function cancelAll() {
    if (ifchoose.value) {
      ifchoose.value = false
      all.value = false
      sendGoodsList.value.forEach((item) => {
        item.choosed = false
      })
      totalSum.value = 0
      setTimeout(() => {
        ifchoose.value = true
      }, 1200)
    } else {
      uni.utils.toast('让手指放松下吧，请两秒后重试~')
    }
  }

  //选择背包商品
  const totalSum = ref(0)
  function chooseBagGoods(item) {
    if (item.choosed == true) {
      item.choosed = false
      all.value = false
      --totalSum.value
    } else {
      if (totalSum.value >= 300) {
        all.value = true
        uni.utils.toast('最多只能选300个商品')
        return
      }
      item.choosed = true
      ++totalSum.value
      if (totalSum.value >= 300) {
        all.value = true
      }
    }
  }

  // 撤销发布
  function cancelSend() {
    totalSum.value = 0
    categaryPage.value = 1
    sendGoodsList.value = []
    saleCategary.value = 0
    ruleId.value = 0
    sendpopup.value.close('bottom')
  }

  // 去发布
  const chooseGoodsList = ref([])
  function goSend() {
    chooseGoodsList.value = []
    sendGoodsList.value.forEach((item) => {
      if (item.choosed) {
        chooseGoodsList.value.push(item)
      }
    })
    if (chooseGoodsList.value.length == 0) {
      uni.utils.toast('请选择发布商品')
    } else {
      console.log(chooseGoodsList.value)
    }
    console.log(chooseGoodsList.value)
    uni.navigateTo({
      url: `/transactionPage/senddeal/index?list=${encodeURIComponent(
        JSON.stringify(chooseGoodsList.value)
      )}`,
    })
  }

  //商品详情弹出
  const goodspopup = ref()
  const goodsInfo = ref({
    goods_name: '',
    img: '',
  })
  function checkgoods(item) {
    console.log(item)
    goodsInfo.value = item
    goodspopup.value.open('bottom')
  }
  const launch = ref(2)
  function change(index) {
    if (launch.value == 1) {
      launch.value = 2
    } else {
      launch.value = 1
    }
    totalSum.value = 0
    sendGoodsList.value = []
    categaryPage.value = 1
    getGoodsList()
    // getBagList()
    // setTimeout(() => {
    //   clickLimit.value = true
    // }, 1500)
  }
  onMounted(() => {
    squareList.value = []
    getSquareList()
  })
  onShow(() => {})
</script>

<template>
  <view>
    <view class="search">
      <uni-search-bar
        class="uni-mt-10"
        radius="100"
        placeholder="搜索..."
        clearButton="auto"
        cancelButton="none"
        @confirm="searchSquare"
        @clear="searchSquare"
        v-model="keywords"
        style="width: 88%"
      />

      <view class="avatar" @click="sendGoods">
        <image
          style="width: 76rpx; height: 76rpx; border-radius: 50%"
          :src="userCodeStore.usercode.himg"
          mode=""
        ></image>
        <view class="world-bar"> 发布 </view>
      </view>
    </view>
    <view class="screen">
      <view class="screen-left"> </view>
      <view class="screen-right">
        <view
          class="screen-right-item"
          :class="{ 'screen-right-item-active': isBuy == 1 }"
          @click="buyNow"
        >
          一口价
        </view>
        <view
          class="screen-right-item"
          :class="{
            'screen-right-item-active': orderBy == 'new,desc',
          }"
          @click="sortBy('new,desc')"
        >
          最新
        </view>
        <view
          class="screen-right-item"
          :class="{
            'screen-right-item-active': orderBy == 'hot,desc',
          }"
          @click="sortBy('hot,desc')"
        >
          最热
        </view>
      </view>
    </view>
    <scroll-view
      scroll-y="true"
      class="scroll-Y"
      style="height: 80vh"
      @scrolltolower="squareListLower"
    >
      <view class="square-content">
        <view
          class="square-content-item"
          v-for="item in squareList"
          :key="'square' + item.id"
        >
          <view
            class=""
            style="
              position: absolute;
              top: 0;
              right: 0;
              width: 92rpx;
              height: 38rpx;
              border-radius: 0 12rpx 0 0;
              background-color: #3fb3fa;
              font-size: 22rpx;
              text-align: center;
              line-height: 38rpx;
              color: #fff;
            "
            v-if="item.is_cy == 1"
          >
            已参与
          </view>
          <view class="square-content-item-top">
            <view class="square-content-item-top-left">
              <view
                class=""
                style="
                  position: relative;
                  width: 88rpx;
                  height: 88rpx;
                  margin-right: 22rpx;
                "
              >
                <image
                  :src="item.himg"
                  style="width: 88rpx; height: 88rpx; border-radius: 50%"
                  mode=""
                ></image>
                <view
                  v-if="userCodeStore.usercode.user == item.user_id"
                  class="back"
                  style="
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 64rpx;
                    height: 28rpx;
                    border-radius: 14rpx;
                    font-size: 16rpx;
                    line-height: 28rpx;
                    text-align: center;
                  "
                >
                  我的
                </view>
              </view>
              <view class="" style="font-size: 30rpx; font-weight: 700">
                {{ item.nickname }}
              </view>
            </view>
            <view class="top-time" style="font-size: 22rpx; color: #9b9b9d">
              {{ parseTime(item.add_time) }}
            </view>
          </view>
          <view class="square-content-item-center">
            <scroll-view
              class="scroll-view_H"
              scroll-x="true"
              style="height: 150rpx; width: 100%"
            >
              <view class="scroll-view_H-list">
                <view
                  class="scroll-view_H-item"
                  style="position: relative"
                  v-for="goods in item.goods"
                  :key="'goods' + goods.id"
                  @click="checkgoods(goods)"
                >
                  <view v-if="goods.goods_num" class="goods_num" style="">
                    x{{ goods.goods_num }}
                  </view>
                  <image
                    :src="goods.img"
                    style="width: 130rpx; height: 130rpx; display: block"
                    mode=""
                  ></image>
                  <view class="presare" v-if="goods.type == 1"> 预售 </view>
                  <!-- <view v-else class="passTime">
                    <image
                      src="../../../static/pass.png"
                      style="width: 16rpx; height: 16rpx"
                      mode=""
                    ></image>
                    <view class="" style="font-size: 12rpx; color: #fff">
                      {{ goods.passDay }}天后自动发货
                    </view>
                  </view> -->
                </view>
              </view>
            </scroll-view>
            <view class="total-goods"> 共{{ item.num }}件 </view>
          </view>
          <view class="square-content-item-bottom">
            <view class="square-content-item-bottom-left">
              <!-- <view class="square-content-item-bottom-left-item">
								<image
									src="@/static/start-price.png"
									style="
										width: 42rpx;
										height: 42rpx;
										margin-right: 10rpx;
									"
									mode=""
								></image>
								<view
									class=""
									style="font-size: 20rpx; font-weight: 700"
								>
									{{ item.min_price }}
								</view>
							</view> -->
              <view
                class="square-content-item-bottom-left-item"
                v-if="item.is_buy == 1"
              >
                <image
                  src="@/static/one-price.png"
                  style="width: 42rpx; height: 42rpx; margin-right: 10rpx"
                  mode=""
                ></image>
                <view class="" style="font-size: 20rpx; font-weight: 700">
                  {{ item.buy_price }}
                </view>
              </view>
              <view class="square-content-item-bottom-left-item">
                <image
                  src="@/static/join-num.png"
                  style="width: 42rpx; height: 42rpx; margin-right: 10rpx"
                  mode=""
                ></image>
                <view class="" style="font-size: 20rpx; font-weight: 700">
                  {{ item.participate_num }}
                </view>
              </view>
            </view>
            <view class="square-content-item-bottom-right">
              <view
                class="price-button button"
                v-if="userCodeStore.usercode.user == item.user_id"
                @click="checkPayPrice(item.id)"
              >
                查看出价
              </view>
              <view
                class="join-button button"
                v-else
                @click="joinPage(item.id)"
              >
                参与交易
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 发布商品 -->
    <uni-popup ref="sendpopup" type="bottom">
      <view class="sendpopup-content">
        <view class="sendpopup-content-title">我的背包</view>
        <view class="sendpopup-content-screen">
          <view class="sendpopup-content-screen-left" @click="categoryPOP">
            <view class=" " style="margin-right: 10rpx"> 筛选 </view>
            <view class="aim"> </view>
            <view v-if="launch != 1">
              <view
                class="choose-all"
                style=""
                @tap.stop="chooseAll"
                v-if="!all"
              >
                全选
              </view>
              <view class="cancel-all" v-else @tap.stop="cancelAll">
                取消
              </view>
            </view>
          </view>
          <view class="filter-right">
            <view
              :class="{ 'active-view': launch == 1 }"
              @click.stop="change()"
            >
              折叠
            </view>
          </view>
          <view class="sendpopup-content-screen-right">
            <view class="" style="display: flex; align-items: center">
              <view class="" style="font-weight: 500"> 已选择赏品： </view>
              <!-- <view class="num"> {{ totalSum }}个  </view> -->
              <view class="num"> {{ newTotalNum }}个</view>
            </view>
            <view
              class=""
              style="
                position: absolute;
                top: 140rpx;
                font-size: 20rpx;
                color: #9b9b9b;
              "
            >
              最多同时选择300个赏品哦
            </view>
          </view>
        </view>

        <scroll-view
          scroll-y="true"
          style="height: 67%"
          @scrolltolower="goodsListLower"
        >
          <view class="goods-list">
            <view
              class="goods-list-item"
              v-for="item in sendGoodsList"
              :key="'goods' + item.id"
            >
              <image
                @click="chooseBagGoods(item)"
                :src="item.img"
                style="width: 126rpx; height: 126rpx"
                mode=""
              ></image>
              <image
                @click="chooseBagGoods(item)"
                v-if="item.choosed"
                src="https://ojqn.wm2177.com/wechat_imgs/transition/choosed.png"
                style="
                  width: 126rpx;
                  height: 126rpx;
                  position: absolute;
                  top: 0;
                  left: 0;
                  z-index: 2;
                "
                mode=""
              ></image>
              <view v-if="item.goods_num" class="goods_num" style="">
                x{{ item.goods_num }}
              </view>
            </view>
          </view>
        </scroll-view>

        <view class="sendpopup-content-bottom">
          <view
            class="bottom-button"
            style="margin-right: 94rpx; background-color: #eeeeee"
            @click="cancelSend"
          >
            暂不发布
          </view>
          <view class="bottom-button" @click="goSend"> 发布交易 </view>
        </view>
      </view>
    </uni-popup>

    <!-- 分类弹出层 -->
    <uni-popup ref="categorypopup" type="top">
      <view class="categorypopup">
        <view class="categorypopup-title"> 赏品类型 </view>
        <view class="categorypopup-category">
          <view
            class="categorypopup-category-item"
            :class="{
              'categorypopup-category-item-active': ruleId == 0,
            }"
            @click="setRuleId(0)"
            >全部
          </view>
          <view
            class="categorypopup-category-item"
            :class="{
              'categorypopup-category-item-active': ruleId == item.id,
            }"
            @click="setRuleId(item.id)"
            v-for="item in allRules"
            :key="'rule' + item.id"
            >{{ item.name }}
          </view>
        </view>
        <view class="categorypopup-title"> 商品状态 </view>
        <view class="categorypopup-category">
          <view
            class="categorypopup-category-item"
            :class="{
              'categorypopup-category-item-active': saleCategary == 0,
            }"
            @click="setSaleCategary(0)"
            >全部
          </view>
          <view
            class="categorypopup-category-item"
            :class="{
              'categorypopup-category-item-active': saleCategary == 2,
            }"
            @click="setSaleCategary(2)"
            >现货
          </view>
          <view
            class="categorypopup-category-item"
            :class="{
              'categorypopup-category-item-active': saleCategary == 1,
            }"
            @click="setSaleCategary(1)"
            >预售
          </view>
        </view>
        <view class="categorypopup-bottom">
          <view
            class="categorypopup-bottom-button"
            style="background-color: #f5f6fa; margin-right: 42rpx"
            @click="resetCategory"
          >
            重置
          </view>
          <view class="categorypopup-bottom-button" @click="sureCategory">
            确认
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 详情弹出层 -->
    <uni-popup ref="goodspopup" type="bottom">
      <view class="goodspopup-content">
        <view class="goods-title">{{ goodsInfo.goods_name }} </view>
        <image
          :src="goodsInfo.img"
          style="width: 660rpx; height: 660rpx"
          mode=""
        ></image>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  .goods_num {
    position: absolute;
    left: 50%;
    margin-left: -70rpx;
    width: 140rpx;
    z-index: 1;
    bottom: -30rpx;
    color: #333;
    height: 36rpx;
    text-align: center;
    line-height: 36rpx;
    border-radius: 100%;
    font-size: 22rpx;
  }
  .search {
    display: flex;
    align-items: center;
    background-color: #fff;
    .avatar {
      position: relative;
      width: 76rpx;
      height: 76rpx;
      border-radius: 50%;
      .world-bar {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 64rpx;
        height: 28rpx;
        border-radius: 14rpx;
        background-color: $transaction-color;
        text-align: center;
        line-height: 28rpx;
        font-size: 16rpx;
      }
    }
  }
  .screen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    background-color: #fff;
    .screen-left {
      font-weight: 700;
      font-size: 28rpx;
    }
    .screen-right {
      display: flex;
      align-items: center;
      .screen-right-item {
        width: 130rpx;
        height: 58rpx;
        margin-right: 16rpx;
        box-sizing: border-box;
        background-color: #f7f7f7;
        border-radius: 29rpx;
        text-align: center;
        line-height: 58rpx;
        font-size: 24rpx;
        &:last-child {
          margin-right: 0;
        }
      }
      .screen-right-item-active {
        background-color: $transaction-color !important;
      }
    }
  }
  .square-content {
    padding: 20rpx;
    .square-content-item {
      position: relative;
      height: 398rpx;
      margin-bottom: 20rpx;
      padding: 22rpx 18rpx 0 18rpx;
      box-sizing: border-box;
      border-radius: 12rpx;
      background-color: #fff;
      .square-content-item-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .square-content-item-top-left {
          display: flex;
          align-items: center;
        }
      }
      .square-content-item-center {
        position: relative;
        height: 200rpx;
        padding: 32rpx 0;
        box-sizing: border-box;
        border-bottom: 6rpx solid #f5f5f5;
        .total-goods {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 92rpx;
          height: 46rpx;
          background-color: #eeeeee;
          font-size: 26rpx;
          line-height: 46rpx;
          text-align: center;
          color: #9b9b9d;
        }
        .scroll-view_H {
          .scroll-view_H-list {
            display: flex;
            flex-wrap: nowrap;
            .scroll-view_H-item {
              width: 130rpx;
              height: 130rpx;
              margin-right: 20rpx;
              box-sizing: border-box;
              position: relative;
              // .numBox{

              // }
              &:last-child {
                margin-right: 0;
              }
              .presare {
                position: absolute;
                top: 0;
                right: 0;
                width: 54rpx;
                height: 28rpx;
                border-radius: 0 10rpx 0 0;
                background-color: rgba(0, 0, 0, 0.5);
                font-size: 20rpx;
                line-height: 28rpx;
                text-align: center;
                color: #fff;
              }
              .passTime {
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 28rpx;
                border-radius: 10rpx 10rpx 0 0;
                background-color: rgba(0, 0, 0, 0.5);
              }
            }
          }
        }
      }
      .square-content-item-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 92rpx;
        .square-content-item-bottom-left {
          display: flex;
          align-items: center;
          .square-content-item-bottom-left-item {
            width: 134rpx;
            display: flex;
            align-items: center;
          }
        }
        .square-content-item-bottom-right {
          .button {
            width: 158rpx;
            height: 58rpx;
            border-radius: 29rpx;
            background-color: $transaction-color;
            text-align: center;
            line-height: 58rpx;
            font-size: 24rpx;
            font-weight: 700;
          }
        }
      }
    }
  }

  .sendpopup-content {
    position: relative;
    height: 78vh;
    border-radius: 26rpx 26rpx 0 0;
    background-color: #fff;
    .sendpopup-content-title {
      font-size: 32rpx;
      font-weight: 700;
      line-height: 84rpx;
      text-align: center;
    }
    .sendpopup-content-screen {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20rpx 30rpx 20rpx;
      border-bottom: 8rpx solid #f7f7f7;
      .filter-right {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        view {
          width: 82rpx;
          height: 44rpx;
          border-radius: 2rpx;
          background-color: #f5f5f5;
          text-align: center;
          line-height: 44rpx;
          color: #999999;
        }
        .active-view {
          color: #3d3d3d;
          background-color: $all-color;
        }
      }
      .sendpopup-content-screen-left {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        font-weight: 700;
        .aim {
          width: 15rpx;
          height: 15rpx;
          border-bottom: 4rpx solid #3d3d3d;
          border-right: 4rpx solid #3d3d3d;
          transform: rotate(45deg);
        }
        .choose-all {
          width: 92rpx;
          height: 50rpx;
          margin-left: 20rpx;
          background-color: $transaction-color;
          border-radius: 8rpx;
          font-size: 26rpx;
          text-align: center;
          line-height: 50rpx;
        }
        .cancel-all {
          width: 92rpx;
          height: 50rpx;
          margin-left: 20rpx;
          background-color: #eee;
          border-radius: 8rpx;
          font-size: 26rpx;
          text-align: center;
          line-height: 50rpx;
        }
      }
      .sendpopup-content-screen-right {
        display: flex;
        flex-direction: column;
        // align-items: center;
        font-size: 30rpx;
        font-weight: 700;
        .num {
          width: 138rpx;
          height: 54rpx;
          border-radius: 27rpx;
          background-color: $transaction-color;
          font-size: 26rpx;
          font-weight: 700;
          line-height: 54rpx;
          text-align: center;
        }
      }
    }
    .goods-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 20rpx;
      .goods-list-item {
        position: relative;
        width: 126rpx;
        height: 126rpx;
        margin-right: 20rpx;
        margin-bottom: 32rpx;
        box-sizing: border-box;
        border-radius: 8rpx;
        // overflow: hidden;
        &:nth-child(5n) {
          margin-right: 0;
        }
      }
    }
    .sendpopup-content-bottom {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 0;
      left: 0;
      height: 194rpx;
      width: 100%;
      box-shadow: 0rpx 10rpx 20rpx 0 rgba(0, 0, 0, 0.3);
      .bottom-button {
        width: 268rpx;
        height: 86rpx;
        background-color: $transaction-color;
        border-radius: 43rpx;
        font-size: 28rpx;
        font-weight: 700;
        line-height: 86rpx;
        text-align: center;
      }
    }
  }
  .categorypopup {
    position: relative;
    height: 830rpx;
    padding: 22rpx;
    box-sizing: border-box;
    background-color: #fff;
    .categorypopup-title {
      margin-bottom: 28rpx;
      font-size: 32rpx;
      font-weight: 700;
    }
    .categorypopup-category {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .categorypopup-category-item {
        width: 116rpx;
        height: 52rpx;
        margin: 0 24rpx 20rpx 0;
        border: 2px solid #f4f4f4;
        box-sizing: border-box;
        font-size: 24rpx;
        line-height: 52rpx;
        text-align: center;
        color: #aaaaaa;
      }
      .categorypopup-category-item-active {
        background-color: $transaction-color;
        border: none;
        color: #3d3d3d;
      }
    }
    .categorypopup-bottom {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: 0;
      bottom: 44rpx;
      width: 100%;
      .categorypopup-bottom-button {
        width: 276rpx;
        height: 86rpx;
        background-color: $transaction-color;
        font-size: 32rpx;
        font-weight: 700;
        line-height: 86rpx;
        text-align: center;
      }
    }
  }

  .goodspopup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 886rpx;
    width: 710rpx;
    margin: 0 auto;
    padding-top: 36rpx;
    box-sizing: border-box;
    border-radius: 10rpx 10rpx 0 0;
    background-color: #fff;
    .goods-title {
      margin-bottom: 17rpx;
      font-size: 30rpx;
    }
  }
  ::v-deep .uni-searchbar {
    padding: 0;
    background-color: transparent;
  }
  ::v-deep .uni-searchbar__box {
    width: 100%;
    height: 72rpx !important;
    border: none !important;
    justify-content: start !important;
  }
  .back {
    background-color: $transaction-color;
  }
</style>
